
<template>
  <div>
    <el-row>
      <!-- <el-button plain v-show="show" @click="getCode">倒计时</el-button>
      <el-button plain v-show="!show" class="count">{{count}} s</el-button>-->
    </el-row>
    <span v-show="show" @click="getCode">获取验证码</span>
    <span v-show="!show" class="count">{{count}} s后重新获取</span>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      show: true,

      count: '',

      timer: null
    }
  },

  methods: {
    getCode () {
      const TIME_COUNT = 60

      if (!this.timer) {
        this.count = TIME_COUNT

        this.show = false

        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true

            clearInterval(this.timer)

            this.timer = null
          }
        }, 1000)
      }
    }
  }
}
</script>

<style></style>
